<!DOCTYPE html>
<html>
<head>
<title>SMART - 客户管理</title>
<jsp:include page="../include/head.jsp" />
<link rel="stylesheet" href="resources/css/bootstrap/css/bootstrap-datetimepicker.min.css" />
<style>
@media only screen and (max-width:768px){ 
	.content-wrapper {
		padding: 0;
	}
	.content-wrapper>.content-heading, .content-wrapper>h3 {
		margin-top: 0px;
		padding-left: 30px;
	}
	.panel {
		border: none;
	}
}

.keywords-box{
	width: 95%;
}
.panel {
	margin-bottom: 0;
}

.tdHoverShowLink > a{
	visibility: hidden;
}

.tdHoverShowLink:hover > a{
	visibility: visible;
	color: red;
}

@media only screen and (min-width: 768px) {
	.content-wrapper>.content-heading, .content-wrapper>h3 {
		margin-bottom: 0;	
	}
}
</style>
</head>
<body>
   <div class="wrapper" id="app">
      <!-- 导航区 -->
      <jsp:include page="../include/topnav.jsp" />
      <!-- 左侧菜单区 -->
      <jsp:include page="../include/menu.jsp">
      	<jsp:param value="" name="selectedItem" />
      </jsp:include>
      <!-- 右侧边栏 -->
      <jsp:include page="../include/right.jsp" />
      <!-- Main section-->
      
      <section style="margin-bottom: 0 !important;">
         <!-- Page content-->
         <div class="content-wrapper">
            <div class="content-heading">
            	<select v-model="cond.team" v-on:change="changeTeam()">
            		<template v-for="team in teams">
            		<option :value="team.code">{{team.name}}</option>
            		</template>
            	</select>
            	<span v-show="isOp" class="pull-right">&nbsp;待加:<span class="text-danger text-bold">{{stat.TEL_VERIFIED==null?0:stat.TEL_VERIFIED}}</span></span>
            	<span v-show="isSales" class="pull-right">&nbsp;失败:<span class="text-danger text-bold">{{stat.WECHAT_REJECTED==null?0:stat.WECHAT_REJECTED}}</span></span>
            </div>
            <div class="panel panel-default" v-show="isSales">
            	<div class="panel-body">
            		<form role="form" action="admin/lead/edit" method="post" class="form-inline">
            			<input type="number" class="form-control" v-model="inputMobile" id="inputMobile" placeholder="手机号" />
            			<div class="input-group">
            				<input type="text" class="form-control" v-model="inputWechat" id="inputWechat" placeholder="微信号" />
            				<span class="input-group-btn">
            					<button type="button" class="btn btn-primary" v-on:click="wechatSameAsMobile">同手机</button>
            				</span>
            			</div>
            			<button type="button" class="btn btn-primary" v-on:click="add">添加</button>
            		</form>
			 	</div>
			</div>
         </div>
      </section>
      <section>
         <!-- Page content-->
         <div class="content-wrapper">
         	<div class="row">
            	<div class="col-xs-9">
		            <div class="panel panel-default">
		            	<div class="panel-body" style="padding-top: 0 !important;">
		            		<div class="table-responsive">
					            <table class="table table-hover">
									<thead>
										<tr v-show="!searching">
											<th>手机号</th>
											<th>微信号</th>
											<th>微信昵称</th>
											<th>状态</th>
											<th>最新备注</th>
											<th>最近更新</th>
											<th>  
												<button class="btn btn-primary" v-on:click="toSearch">搜索</button>
											</th>
										</tr>
										<tr v-show="searching">
											<th colspan="2">
												<div class="input-group keywords-box">
						            				<input type="text" class="form-control" v-model="cond.keywords" id="keywords" placeholder="手机号, 微信号, 或微信昵称" />
						            			</div>
											</th>
											<th colspan="2">
												<div class="input-group date" data-date="" data-date-format="yyyy-MM-dd" data-link-field="dtp_input1">
								                    <input class="form-control form_date" placeholder="选择开始日期" id="beginCrtTime" v-model="cond.beginCrtTimeStr" v-on:click="showCalendar" size="16" type="text" value="" readonly />
								                </div>
											</th>
											<th colspan="2">
												<div class="input-group date form_date" data-date="" data-date-format="yyyy-MM-dd" data-link-field="dtp_input1">
								                    <input class="form-control" placeholder="选择结束日期" id="endCrtTime" v-model="cond.endCrtTimeStr" v-on:click="showBeginCrtTimeSelector" size="16" type="text" value="" readonly />
								                </div>
											</th>
											<th>
												<button type="button" class="btn btn-primary" v-on:click="keywordSearch">搜索</button>
												<button class="btn btn-primary" v-on:click="backFromSearch">返回</button>
											</th>
										</tr>
									</thead>
									<tbody>
									<template v-if="page!=null && page.content!=null" v-for="obj in page.content">
									<tr v-bind:class="{'text-info': obj.status=='WECHAT_FRIEND_REQ_SENT', 'text-danger': obj.status=='WECHAT_REJECTED', 'text-warning': obj.status=='TEL_VERIFIED' || obj.status=='TEL_RECONFIRMED', 'text-success': obj.status=='WECHAT_ACCEPTED'}">
										<td v-bind:class="{'animated': obj.markAsNew,'flush': obj.markAsNew,'infinite': obj.markAsNew}">{{obj.mobile}}</td>
										<td class="tdHoverShowLink">{{obj.wechat}} <a href="javascript:;" v-on:click="changeWechat(obj)">修改</a></td>
										<td>{{obj.wechatName}}</td>
										<td>{{obj.status | statusCode2Name}}</td>
										<td :title="obj.allComment" class="tdHoverShowLink">{{obj.lastComment}} <a href="javascript:;" v-if="obj.allComment!=null && obj.allComment!=''" v-on:click="showAllComment(obj)">更多</a></td>
										<td>{{obj.updTime | formatDate}}</td>
										<td>
											<div class="btn-group" role="group">
												<button type="button" class="btn btn-primary btn-xs" v-on:click="addComment(obj)">备注</button>
												<button type="button" v-show="isOp && obj.status=='TEL_VERIFIED'" class="btn btn-info btn-xs" v-on:click="markWechatFriendReqSent(obj)"> 
													等待通过
												</button>
												<button type="button" v-show="isOp && (obj.status=='TEL_VERIFIED' || obj.status=='WECHAT_FRIEND_REQ_SENT')" class="btn btn-danger btn-xs" v-on:click="markWechatRejected(obj)">失败</button>
												<button type="button" v-show="isOp && (obj.status!='WECHAT_ACCEPTED')" class="btn btn-success btn-xs" v-on:click="markWechatAccepted(obj)">通过</button>
											</div>
											<div class="btn-group" role="group" v-show="isSales && obj.status=='WECHAT_REJECTED'">
												<button type="button" class="btn btn-success btn-xs" v-on:click="markTelReconfirmed(obj)">电话复核通过</button>
											</div>
										</td>
									</tr>
									</template>
									<template v-if="page==null || page.total==0">
										<tr class="text-warning">
											<td colspan="7" style="text-align: center;" class="animated pulse infinite"><span>没有数据!</span></td>
										</tr>
									</template>
									</tbody>
								</table>
							 </div>
							 <jsp:include page="../include/vuePagination.jsp" />
					 	</div>
					</div>
				</div>
			</div>
         </div>
         
         <div class="content-wrapper">
            <div class="panel panel-default">
            	<div class="panel-body">
            		<h3 style="margin-top: 0;">今日统计 [总名单: {{(stat.TEL_VERIFIED==null?0:stat.TEL_VERIFIED) + (stat.WECHAT_ACCEPTED==null?0:stat.WECHAT_ACCEPTED) + (stat.WECHAT_REJECTED==null?0:stat.WECHAT_REJECTED) + (stat.WECHAT_FRIEND_REQ_SENT==null?0:stat.WECHAT_FRIEND_REQ_SENT) + (stat.TEL_RECONFIRMED==null?0:null)}}]</h3>
            		<hr />
            		<div class="row stat">
  						<div class="col-xs-3">
  							<h4><span class="label label-success">成功: {{stat.WECHAT_ACCEPTED==null?0:stat.WECHAT_ACCEPTED}}</span></h4>
  						</div>
  						<div class="col-xs-3">
  							<h4><span class="label label-danger">失败: {{stat.WECHAT_REJECTED==null?0:stat.WECHAT_REJECTED}}</span></h4>
  						</div>
  						<div class="col-xs-3">
  							<h4><span class="label label-warning">待加: {{stat.TEL_VERIFIED==null?0:stat.TEL_VERIFIED}}</span></h4>
  						</div>
  						<div class="col-xs-3">
  							<h4><span class="label label-info">待通过: {{stat.WECHAT_FRIEND_REQ_SENT==null?0:stat.WECHAT_FRIEND_REQ_SENT}}</span></h4>
  						</div>
  					</div>
			 	</div>
			</div>
         </div>
      </section>
      <jsp:include page="../include/footer.jsp" />
   </div>
   <jsp:include page="../include/script.jsp" />
   <script src="resources/js/titlemessage.js"></script>
   <script src="resources/css/bootstrap/js/bootstrap-datetimepicker.min.js"></script>
   <script src="resources/css/bootstrap/js/bootstrap-datetimepicker.zh-CN.js"></script>
</body>
</html>
<script>
$('#mainMenu li').removeClass('active');
$('#menuDashboard').addClass('active');

function formatDate (input) {
	if (input!='') {
       var d = new Date(input);
       var year = d.getFullYear()==''?"":d.getFullYear();
       if(year>1970){
	       var month = d.getMonth() + 1;
	       if(month>=9){
	    	   month=d.getMonth() + 1;
	       }else{
	    	   month='0'+parseInt(d.getMonth()+1);
	       }
	       var day = d.getDate() <10 ? '0' + d.getDate() : '' + d.getDate();
	       var hour = d.getHours();
	       var minutes = d.getMinutes()<10 ? '0' + d.getMinutes() : '' + d.getMinutes();;
	       var seconds = d.getSeconds();
	       return  month + '-' + day + ' ' + hour + ':' + minutes;
	       }else{
	    	   return "";
	       }
	}else{
		return '';
	}
}

var roles = '${user.roles}'.split(',');

var teamConfig = <smt:dict code="teams" />;
var teamStr = '${user.teams}';
var teamArr = teamStr.split(',');
var teams = [];
function hasRole(role) {
	for(var i=0; i<roles.length; i++) {
		if(roles[i]==role) {
			return true;
		}
	}
	return false;
}

for(var i=0; i<teamArr.length; i++) {
	teams.push({'code': teamArr[i].split('=')[0], 'name': teamConfig[teamArr[i].split('=')[0]]});
}
var vm = new Vue({
	el : '#app',
	data : {
		searching: false,
		cond : {
			keywords: '',
			pageNumber : 1,
			beginCrtTimeStr: '',
			endCrtTimeStr: '',
			team: teams[0].code
		},
		isOp: hasRole('ROLE_OP_ADMIN') || hasRole('ROLE_OP'),
		isSales: hasRole('ROLE_SALES_ADMIN') || hasRole('ROLE_SALES'),
		teams: teams,
		inputMobile: '',
		inputWechat: '',
		selectedTeam: teams[0].code,
		page : {
			total: 0
		},
		stat: {
			'TEL_VERIFIED': 0,
			'WECHAT_FRIEND_REQ_SENT': 0,
			'WECHAT_ACCEPTED': 0,
			'WECHAT_REJECTED': 0,
			'TEL_RECONFIRMED': 0,
		},
		selectedLead: null,
		maxUpdTime: null
	},
	created : function() {
		$('#beginCrtTime').datetimepicker({
		    format: 'yyyy-mm-dd hh:ii',
		    minView: "date",
		    maxView: 'date',
		    weekStart: 1,
		    todayBtn:  1,
			autoclose: 1,
			todayHighlight: 1,
			startView: 2,
			forceParse: 0,
		    showMeridian: 1
		})
		
		$('#endCrtTime').datetimepicker({
			format: 'yyyy-mm-dd hh:ii',
			minView: "date",
			maxView: 'date',
		    weekStart: 1,
		    todayBtn:  1,
			autoclose: 1,
			todayHighlight: 1,
			startView: 2,
			forceParse: 0,
		    showMeridian: 1
		})
		
		this.query();
		var that = this;
		setInterval(function(){
			that.query();
		}, 20000);
	},
	methods : {
		showCalendar: function() {
			var that = this;
			$('#beginCrtTime').datetimepicker('show');
			$('#beginCrtTime').datetimepicker().on('hide', function(){
				that.cond.beginCrtTimeStr = $('#beginCrtTime').val();
			});
		},
		showAllComment: function(obj) {
			alert(obj.allComment.replace('<br>', '\n'));
		},
		showBeginCrtTimeSelector: function(){
			var that = this;
			$('#endCrtTime').datetimepicker('show');
			$('#endCrtTime').datetimepicker().on('hide', function(){
				that.cond.endCrtTimeStr = $('#endCrtTime').val();
			});
		},
		toSearch: function() {
			this.searching = true;
		},
		backFromSearch: function() {
			this.searching = false;
			this.cond.keywords = '';
			this.cond.beginCrtTimeStr = '';
			this.cond.endCrtTimeStr = '';
			this.query();
		},
		keywordSearch: function() {
			this.cond.pageNumber = 1;
			this.query();
		},
		changeTeam: function() {
			this.cond.pageNumber = 1;
			this.maxUpdTime = null;
			this.query();
		},
		wechatSameAsMobile: function() {
			this.inputWechat = '微信同号';
		},
		changeWechat: function(obj) {
			var that = this;
			var wechat = prompt("请输入新微信号");
			
			if(wechat==null || wechat=='') {
				alert("您输入的内容为空, 请重新操作");
				return;
			}
			$.ajax({
				url: 'admin/lead/changeWechat',
				type: 'post',
				data: {'id': obj.id, 'wechat': wechat},
				success: function(resp) {
					that.query();
				}
			})
		},
		addComment: function(obj) {
			var that = this;
			var opComment = prompt("请输入备注内容");
			
			if(opComment==null || opComment=='') {
				alert("您没有输入备注内容, 请重新操作");
				return;
			}
			$.ajax({
				url: 'admin/lead/addComment',
				type: 'post',
				data: {'id': obj.id, 'comment': opComment},
				success: function(resp) {
					that.query();
				}
			})
		},
		markWechatRejected: function(obj) {
			var that = this;
			var opComment = prompt("请备注失败原因");
			
			if(opComment==null || opComment=='') {
				alert("您没有输入失败原因, 请重新操作");
				return;
			}
			$.ajax({
				url: 'admin/lead/markWechatRejected',
				type: 'post',
				data: {'id': obj.id, 'opComment': opComment},
				success: function(resp) {
					obj.status = 'WECHAT_REJECTED';
					obj.opComment = opComment;
					that.query();
				}
			})
		},
		markTelReconfirmed: function(obj) {
			var that = this;
			var salesComment = prompt("请备注电话复合结果说明");
			
			if(salesComment==null || salesComment=='') {
				alert("您没有输入电话复合结果说明, 请重新操作");
				return;
			}
			$.ajax({
				url: 'admin/lead/markTelReconfirmed',
				type: 'post',
				data: {'id': obj.id, 'salesComment': salesComment},
				success: function(resp) {
					obj.status = 'TEL_VERIFIED';
					obj.salesComment = salesComment;
					that.query();
				}
			})
		},
		markWechatFriendReqSent: function(obj) {
			var that = this;
			var wechatName = obj.wechatName;
			if(wechatName==null || wechatName=='') {
				wechatName = prompt("请备注微信昵称");
			}
			if(wechatName==null || wechatName=='') {
				alert("您没有输入微信昵称, 请重新操作");
				return;
			}
			$.ajax({
				url: 'admin/lead/markWechatFriendReqSent',
				type: 'post',
				data: {'id': obj.id, 'wechatName': wechatName},
				success: function(resp) {
					obj.wechatName = wechatName;
					that.query();
				}
			})
		},
		markWechatAccepted: function(obj) {
			var that = this;
			var wechatName = obj.wechatName;
			if(wechatName==null || wechatName=='') {
				wechatName = prompt("请备注微信昵称");
			}
			if(wechatName==null || wechatName=='') {
				alert("您没有输入微信昵称, 请重新操作");
				return;
			}
			$.ajax({
				url: 'admin/lead/markWechatAccepted',
				type: 'post',
				data: {'id': obj.id, 'wechatName': wechatName},
				success: function(resp) {
					obj.wechatName = wechatName;
					obj.status = 'WECHAT_ACCEPTED';
					that.query();
				}
			})
		},
		query: function() {
			var that = this;
			$.ajax({
				url: 'admin/lead/query',
				type: 'post',
				data: that.cond,
				success: function(data) {
					that.page = data.page;
					if(that.page.content!=null && that.page.content.length!=0) {
						var newMaxUpdTime = that.page.content[0].updTime;
						for(var i=0; i<that.page.content.length; i++) {
							if(that.maxUpdTime!=null && that.page.content[i].updTime>that.maxUpdTime) {
								that.page.content[i].markAsNew = true;
							}
						}
						that.maxUpdTime = newMaxUpdTime;
					}
					if(data.stat==null) {
						that.stat = {};
					}
					else {
						that.stat = data.stat;
					}
					if(that.isOp && that.stat.TEL_VERIFIED!=null && that.stat.TEL_VERIFIED!=0){
						TitleMessage.show();
					}
					else {
						TitleMessage.clear();
					}
				}
			})
		},
		next: function() {
			if(this.cond.pageNumber<this.page.totalPages) {
				this.cond.pageNumber++;
			}
			this.query();
		},
		prev: function() {
			if(this.cond.pageNumber>1) {
				this.cond.pageNumber--;
			}
			this.query();
		},
		first: function() {
			this.cond.pageNumber = 1;
			this.query();
		},
		last: function() {
			this.cond.pageNumber = this.page.totalPages;
			this.query();
		},
		add: function() {
			var that = this;
			if(!/^1\d{10}$/.test(that.inputMobile)) {
				alert('您输入的手机号有误, 请重新输入');
				return;
			}
			$.ajax({
				url: 'admin/lead/add',
				type: 'post',
				data: {'mobile': that.inputMobile, 'wechat': that.inputWechat, 'team': that.cond.team},
				success: function(resp) {
					that.inputMobile = '';
					that.inputWechat = '';
					that.query();
				}
			})
		}
	},
	filters : {
		formatDate : function(time) {
            var date = new Date(time);
            return formatDate(date); 
        },
        statusCode2Name: function(code) {
        	if(code==null || code =='') {
        		return '';
        	}
        	var map = {
        		'CREATED': '已创建',
        		'TEL_VERIFIED': '待加微信',
        		'WECHAT_FRIEND_REQ_SENT': '待通过',
        		'WECHAT_ACCEPTED': '成功',
        		'WECHAT_REJECTED': '失败',
        		'TEL_RECONFIRMED': '已回访待再加'
        	}
        	return map[code];
        }
	}
});
</script>